import React from "react";
import {BrowserRouter, Route} from "react-router-dom";
import {CssBaseline} from '@material-ui/core';
import Navbar from "./components/Navbar";
import Book from "./pages/Book";
import CategoryBooks from "./pages/CategoryBooks";
import SearchBooks from "./pages/SearchBooks";
import NotFound from "./pages/NotFound";
import MostBooks from "./pages/MostBooks";
import Home from "./pages/Home";
import Grid from "@material-ui/core/Grid";
import Sidenav from "./components/Sidenav";
import makeStyles from "@material-ui/core/styles/makeStyles";

const useStyles = makeStyles(theme => ({
    root: {
        maxWidth: 1300,
        margin: "auto",
        marginTop: theme.spacing(5),
    },
    sideNav: {
        // 手机端不显示侧边栏
        [theme.breakpoints.down('sm')]: {
            display: "none"
        }
    },
}))

function App() {
    const classes = useStyles()

    return (
        <>
            <CssBaseline/> {/* css初始化类似normalize.css*/}
            <BrowserRouter>
                <Navbar/>
                <Grid container className={classes.root}>

                    <Grid item xs={12} md={9}>
                        <Route exact path="/" component={Home}/>
                        <Route exact path="/books/:title" component={Book}/>
                        <Route exact path="/most_viewed" component={MostBooks}/>
                        <Route exact path="/most_recent" component={MostBooks}/>
                        <Route exact path="/month_most_viewed" component={MostBooks}/>
                        <Route exact path="/:category/books" component={CategoryBooks}/>
                        <Route exact path="/search/" component={SearchBooks}/>
                        <Route exact path="*" component={NotFound}/>
                    </Grid>

                    <Grid item xs={12} md={3} className={classes.sideNav}>
                        <Sidenav/>
                    </Grid>
                </Grid>
            </BrowserRouter>
        </>
    );
}

export default App;
